<template>
    <el-main>
    <!-- 面包屑头顶标签 -->
    <el-header>
        <h4>贴标信息列表</h4>
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>贴标信息管理</el-breadcrumb-item>
        <el-breadcrumb-item>贴标信息列表</el-breadcrumb-item>
        </el-breadcrumb>
    </el-header>
    <!-- 头顶标签结束 -->
    <!-- 弹窗信息页面 -->
    <el-card>
        <!-- 搜索与添加 -->
        <el-row :gutter="20">
        <el-col :span="5">
        <el-button type="primary" @click="showAddDialogVisible()">
            <span class="el-icon-circle-plus-outline"></span>添加信息</el-button>
        <el-button type="success" icon="el-icon-refresh" @click="getList()"></el-button>
        </el-col>
        <el-col :span="7" :offset="12">
          <div>
            <el-input
                placeholder="请输入内容"
                v-model="queryInfo.query"
                @keydown="searchList()">
                <el-button
                slot="append"
                icon="el-icon-search"
                @click="searchList()"
                ></el-button>
            </el-input></div
        ></el-col>
        </el-row>
        <!-- 信息表格 -->
        <el-table :data="tableData" border>
        <el-table-column label="条型码编号" sortable></el-table-column>
        <el-table-column label="贴标时间" sortable></el-table-column>
        <el-table-column label="脚标机id" sortable></el-table-column>
        <el-table-column label="屠宰档口名" sortable></el-table-column>
        <el-table-column label="销售去向市场" sortable></el-table-column>
        <el-table-column label="所属禽类" sortable></el-table-column>
        <el-table-column label="操作" width="180px">
          <!-- eslint-disable-next-line -->
            <template slot-scope="scope">
            <el-button type="succes" class="el-icon-setting" size="mini">明细</el-button>
            <el-button type="primary" class="el-icon-edit" size="mini" @click="showEditDialogVisible(scope.row.id),show(scope.row)">编辑</el-button>
            <el-button type="danger" class="el-icon-delete" size="mini">删除</el-button>
            </template>
        </el-table-column>
        </el-table>
        <!-- 分页区域 -->

        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[25, 50, 100, 200]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        >
        </el-pagination>

        <!-- 信息表格结束 -->
    </el-card>
    <!-- 信息页面 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%" @close="dialogClose()">
        <!-- 内容主题区 -->
        <el-card>
            <el-form :model="Form" :rules="FormRules" ref="FormRef" label-width="100px">
              <el-form-item label="条码编号" prop="barcodeNumber">
                <el-input v-model="Form.barcodeNumber"></el-input>
              </el-form-item>
              <el-form-item label="贴标时间" prop="labelingDate">
                <el-input v-model="Form.labelingDate"></el-input>
              </el-form-item>
              <el-form-item label="脚标机id" prop="barcodeMachineId">
                <el-input v-model="Form.barcodeMachineId"></el-input>
              </el-form-item>
              <el-form-item label="档口" prop="stallsId">
                <el-input v-model="Form.stallsId"></el-input>
              </el-form-item>
              <el-form-item label="销售去向" prop="toMarketId">
                <el-input v-model="Form.toMarketId"></el-input>
              </el-form-item>
              <el-form-item label="所属禽类" prop="poultryCategoryId">
                <el-input v-model="Form.poultryCategoryId"></el-input>
              </el-form-item>
              </el-form>
        </el-card>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose()">取 消</el-button>
        <el-button type="primary" @click="postForm()"
            >确 定</el-button
        >
        </span>
    </el-dialog>
  <!-- 添加信息页面结束-->
    <!-- 页面信息结束 -->
    </el-main>
</template>

<script>
export default {
  name: "LabelingRecordList",
  data() {
    return {
      queryInfo: {
        //模糊查找输入
        query: "",
        //初始化当前页数
        pageNum: 1,
        //初始化当前每页显示多少条
        pageSize: 50,
      },
      tableData: [],
      total: 0,
      size: 0,
      //控制对话框弹出
      dialogVisible: false,
      //对话框Title
      dialogTitle:'',
      //对话框状态
      dialogStatus:'',
      //信息的表单数据
      Form:{
        barcodeNumber:'',
        labelingDate:'',
        barcodeMachineId:'',
        stallsId:'',
        poultryCategoryId:'',
        createDate:'',
        toMarketId:'',
      },
      //验证规则
      FormRules:{
        barcodeNumber:[{
          required: true ,
          message:'请输入内容',
          trigger:'blur'
        }],
        labelingDate:[{
          required: true ,
          message:'请输入内容',
          trigger:'blur'
        }],
        barcodeMachineId:[{
          required: true ,
          message:'请输入内容',
          trigger:'blur'
        }],
        stallsId:[{
          required: true ,
          message:'请输入内容',
          trigger:'blur'
        }],
        poultryCategoryId:[{
          required: true ,
          message:'请输入内容',
          trigger:'blur'
        }],
        createDate:[{
          required: true ,
          message:'请输入内容',
          trigger:'blur'
        }],
        toMarketId:[{
          required: true ,
          message:'请输入内容',
          trigger:'blur'
        }],
      },

    };
  },
  methods: {
    show(data){
      console.log(data)
    },
    //模糊查询
    async searchList(){
      // const { data: res } = await this.reqM1Service(``, "", "get");
      //   console.log(res);
      //   if (res.status != 200) {
      //     return this.$message.error("获取列表信息失败！");
      //   }
      //   this.tableData = res.data;
      //   this.total = res.total;
      //   this.size = res.size;
      // if(this.queryInfo.query == '')  {
      //   this.getList()
      // }
    },
    //获取信息
    async getList() {
      // const { data: res } = await this.reqM1Service(``, "", "get");
      //   console.log(res);
      //   if (res.status != 200) {
      //     return this.$message.error("获取列表信息失败！");
      //   }
      //   this.tableData = res.data;
      //   this.total = res.total;
      //   this.size = res.size;
    },
    //监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getList();
    },
    //监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage;
      this.getList();
    },
    //对话框关闭重置内容
    dialogClose(){
    this.$refs.FormRef.resetFields()
    this.dialogVisible = false
    },
    //打开添加页面
    showAddDialogVisible(){
        this.dialogVisible =true
        this.dialogStatus = 'add'
        this.dialogTitle = "添加信息"
        console.log("addok")
    },
    //添加表单信息提交
    async addMsgForm(){
      //表单预验证
    this.$refs.FormRef.validate(async validate=>{
      console.log(validate);
      if(!validate) return;
      //发起请求
      await this.reqM1Service(``,this.Form,"post").then(
        ({ data: res} )=>{
        console.log(res);
        if (res.status != 200) {
          return this.$message.error("添加失败！")
        }
        else {
          this.$message.success("添加成功！")
        }
      })
      this.dialogClose();
      addDialogVisible = false;
      this.getList();
    })
    },
    //展示编辑对话框
    showEditDialogVisible(id){
      this.dialogVisible = true
      this.dialogStatus = 'edit'
      this.dialogTitle = "编辑信息"
      this.showData(id)
    },
    //渲染原有数据
      showData(id){
        // await this.reqM1Service(``,"","get").then(
      //   ({ data: res} )=>{
      //   console.log(res);
      //   if (res.status != 200) {
      //     return this.$message.error(res.message)
      //   }
      //   else {
      //     this.$message.success(res.message)
      //     this.Form = res.data
      //     }
      //     })
      },
    //编辑表单信息提交
    async editMsgForm(){
      //表单预验证
      this.$refs.FormRef.validate(async validate=>{
      console.log(validate);
      if(!validate) return;
      //发起请求
      await this.reqM1Service(``,this.Form,"post").then(
        ({ data: res} )=>{
        console.log(res);
        if (res.status != 200) {
          return this.$message.error("编辑失败！")
        }
        else {
          this.$message.success("编辑成功！")
        }
      })
      this.dialogClose();
      addDialogVisible = false;
      this.getList();
    })
    },
    //表单提交
    postForm(){
      if(this.dialogStatus==='add'){
        this.addMsgForm()
        this.dialogClose()
      }else if (this.dialogStatus==='edit'){
        this.editMsgForm()
        this.dialogClose()
      }else{
        this.dialogClose()
      }
    }
  },
  created() {
    this.getList();
  },
};
</script>
<style lang="less" scoped>

/deep/ .cell{
	color: #606266
}

</style>
